<template>
    <div class="content">
        <BoxWithTitle class="left-wrapper" title="目录" icon="&#xe6f2;">
            <menuAll :CATEGROY="8" :stationId="stationId" @getList="getTableList"/>
        </BoxWithTitle>
        <div class="right-wrapper boxWrapper" v-loading="tableLoading" element-loading-text="数据加载中，请稍后"  
        element-loading-spinner="el-icon-loading" >
        <div class="draw-type-content">
            <el-radio-group v-model="rowState" @change="handleSetTableMode" class="custom-radio-group">
                <el-radio :label="0" class="custom-radio">
                    <div class="radio-content">
                    <i class="iconfont">&#xe655;</i>
                    <span>无模式</span>
                    </div>
                </el-radio>
                <el-radio :label="1" class="custom-radio">
                    <div class="radio-content">
                    <i class="iconfont">&#xe648;</i>
                    <span>行模式</span>
                    </div>
                </el-radio>
                <el-radio :label="2" class="custom-radio">
                    <div class="radio-content">
                    <i class="iconfont">&#xe940;</i>
                    <span>列模式</span>
                    </div>
                </el-radio>
            </el-radio-group>
        </div>
         <el-collapse v-model="activeNames">
            <el-collapse-item title="表格信息" name="1">
                <template slot="title">
                        <div class="collapseTitle-wrapper">
                            <div>
                                表格信息
                                <el-popover
                                    placement="right"
                                    width="340"
                                    trigger="hover">
                                    <div>
                                        <div class="formulaTitle">颜色说明</div>
                                        <div class="formulaWrapper">
                                            <p class="blueText">字体蓝色：主导格</p>
                                            <p class="redText">字体红色：单独测点</p>
                                            <p class="greenText">字体绿色：时间不变</p>
                                            <p class="yellowText">背景黄色：自动填充格</p>
                                        </div>
                                    </div>
                                <i class="header-icon el-icon-info  orangeText"  slot="reference"></i>
                                </el-popover>
                            </div>
                            <el-link type="danger" :underline="false" size="medium" icon="el-icon-delete"  @click.stop="handleDelTable()" style="margin-right: 20px;" v-if="tableData.length > 0">删除</el-link>
                        </div>
                    </template>
                <div class="table-wrapper" ref="table-wrapper" > 
                    <ve-table
                    fixed-header
                    :show-header="false"
                    max-height="calc(100vh - 260px)"
                    :columns="columns"
                    :table-data="tableData"
                    :rowStyleOption="rowStyleOption"
                    :contextmenu-body-option="contextmenuBodyOption"
                    rowKeyFieldName="rowKey"
                    :editOption="editOption"
                    :clipboard-option="clipboardOption"
                    :cell-span-option="cellSpanOption"
                    :cell-style-option="cellStyleOption"
                    :eventCustomOption="eventCustomOption"
                    border-y
                    v-if="tableData.length > 0"
                    />
                    <el-card class="tips-card" ref="tipsCard" body-style="padding:5px" v-show="tableTips.length > 0 && showTips" :style="tipsPosition">
                        <div v-for="(item,index) in tableTips" :key="index">{{item}}</div>
                    </el-card>
                    <div class="addTable" @click="tableNumberDialog = true" v-if="tableData.length == 0">
                        <i class="iconfont">&#xeb94;</i>
                        <p>点此插入表格</p>
                     </div>
                </div>
            </el-collapse-item>
         </el-collapse>        
        </div>  

        <!-- 弹窗部分 -->
        <colAndRowSet 
            :visible="tableNumberDialog"
            @cancel="tableNumberDialog = false"
            @save="handleSaveColAndRow"
        />

        <tableCellSetDialog 
            :visible="cellSettingVisible"
            :showInfoAndValue="showInfoAndValue"
            :cellData="cellData"
            :station-id="stationId"
            @cancelTable="handleCancelCellSetDialog"
            @saveTable="handleSaveCellSetDialog"
        />

        <autoRowDialog 
            :visible="autoDataRowDialog"
            :autoForm="autoForm"
            @cancel="handleCancelAutoRowClick"
            @confirm="handleConfirmAutoRow"
        />

        <tableSetTimeDialog 
            :visible="timeTableCellDialog"
            :timeTableCellForm="timeTableCellForm"
            @cancel="handleCancelTimelick"
            @confirm="handlConfrimTimelick"
        />
    </div>
</template>

<script>
import {getTableByTreeID,setTableMode,TableDel,setTableCell,getTableCell,SaveTable,getTableCellSign,setMainCell,mergeCell,splitCell,DelRow,AddRow,CopyRowToAddRow,getTableAutoRow,AddTableAutoRow,delTableAutoRow,setColOrRowCellsTime,DelCol,AddCol,CopyColAddCol  } from "@/api/https";
import bus from '@/utils/eventBus.js';
import BoxWithTitle from '@/components/base/BoxWithTitle.vue'
import menuAll from '@/components/page/informationAnalysis/menuAll.vue'
import tableCellSetDialog from "../../components/page/setting/tableCellSetDialog.vue";
import autoRowDialog from '@/components/page/setting/autoRowDialog.vue'
import tableSetTimeDialog from '@/components/page/setting/tableSetTimeDialog'
import colAndRowSet from '@/components/page/setting/colAndRowSet.vue'
export default ({
    name:'tableCompilation',
    components:{BoxWithTitle,menuAll,tableCellSetDialog,autoRowDialog,tableSetTimeDialog,colAndRowSet},
    data() {
        return{
            stationId:sessionStorage.getItem("stationId"),
            treeID:'',
            rowState:'',
            tableID:'',
            activeNames:'1',
            columns:[],
            tableData:[],
            cellSettingVisible:false,
            showInfoAndValue:'',
            cellData:{}, 
            tableLoading:false,
            tableTips:[],
            rowStyleOption: {
                clickHighlight: false,
                hoverHighlight: false,
            },
            contextmenuBodyOption:{
                contextmenus: [
                    {
                    type:'cell',
                    label:'单元格',
                    children:[{
                        type: "selectPoint",
                        label: "测点选择",
                        disabled:false
                    },{
                        type:'pointInfo',
                        label:'测点信息',
                        disabled:false
                    },{
                        type:'pointValue',
                        label:'测点值',
                        disabled:false
                    },{
                        type: "alonePoint",
                        label: "单独测点",
                        disabled:false,
                    },{
                        type:'pointMain',
                        label:'设置主导格',
                        disabled:false,
                    },{
                        type: "ordinary",
                        label: "设置普通格",
                        disabled:false,
                    }]
                    },
                    {
                    type:'row',
                    label:'行操作',
                    children:[{
                        type:'mergeRow',
                        label:'合并行',
                    },{
                        type:'splitRow',
                        label:'拆分行',
                    },{
                        type:'REMOVE_ROW',
                        label:'删除行',
                    },{
                        type:'INSERT_ROW_ABOVE',
                        label:'上方增加行',
                    },{
                        type:'INSERT_ROW_BELOW',
                        label:'下方增加行',
                    },{
                        type:'addRowPrevCopy',
                        label:'拷贝并增加上一行',
                    },{
                        type:'addRowNextCopy',
                        label:'拷贝并增加下一行'
                    },{
                        type:'autoRow',
                        label:'设置自动数据填充行',
                    },{
                        type:'delAutoRow',
                        label:'取消自动数据填充行',
                    },
                    {
                        type:'timeInvariantRow',
                        label:'时间设置'
                    },{
                        type:'autoRowYear',
                        label:'单测点年统计自动填充格',
                    }
                    ]
                    },
                    {
                    type:'colum',
                    label:'列操作',
                    children:[{
                        type:'mergeCol',
                        label:'合并列'
                    },{
                        type:'splitCol',
                        label:'拆分列'
                    },{
                        type:'delCol',
                        label:'删除列'
                    },{
                        type:'insertBeforeCol',
                        label:'左侧增加列'
                    },{
                        type:'insertAfterCol',
                        label:'右侧增加列'
                    },{
                        type:'addColLeftCopy',
                        label:'拷贝并增加在左侧'
                    },{
                        type:'addColRightCopy',
                        label:'拷贝并增加在右侧'
                    }, {
                        type:'timeInvariantCol',
                        label:'时间设置'
                    }]
                    }
                ],
                beforeShow: ({
                    isWholeColSelection,
                    selectionRangeKeys,
                    selectionRangeIndexes,
                }) => {
                    const col = selectionRangeKeys.startColKey
                    const row = selectionRangeKeys.startRowKey
                    const data = this.tableRealData[row - 1][col]
                    if(data.l_TP == 0 || data.l_TP == 1 || data.l_TP == ''){
                    this.contextmenuBodyOption.contextmenus[0].children[1].disabled = true
                    this.contextmenuBodyOption.contextmenus[0].children[2].disabled = true
                    this.contextmenuBodyOption.contextmenus[0].children[3].disabled = true
                    this.contextmenuBodyOption.contextmenus[0].children[4].disabled = true
                    this.contextmenuBodyOption.contextmenus[0].children[5].disabled = true
                    }else{
                    this.contextmenuBodyOption.contextmenus[0].children[1].disabled = false
                    this.contextmenuBodyOption.contextmenus[0].children[2].disabled = false
                    this.contextmenuBodyOption.contextmenus[0].children[3].disabled = false
                    this.contextmenuBodyOption.contextmenus[0].children[4].disabled = false
                    this.contextmenuBodyOption.contextmenus[0].children[5].disabled = false
                    }
                },
                afterMenuClick: ({ type, selectionRangeKeys, selectionRangeIndexes })=> {
                    this.hanldeAfterMenuClick(type, selectionRangeKeys, selectionRangeIndexes)
                }
            },
            editOption:{
                afterCellValueChange:({ row, column, changeValue }) => {
                const rowIndex = row.rowKey - 1
                const field = column.field 
                const _d = this.tableRealData[rowIndex][field]
                if(_d && changeValue != _d.text){
                    this.cellData = {..._d}
                    this.cellData.dataTp = 1
                    this.cellData.sign = 4
                    this.cellData.TP = 3
                    this.cellData.L_TP = 1
                    this.cellData.text = changeValue
                    this.handleSetCellTableInput()
                }
                
                }
            },
            clipboardOption:{
                copy: true,
                paste: false,
                cut: false,
                delete: false,
            },
            cellSpanOption:{
                bodyCellSpan: this.bodyCellSpan,
            },
            cellStyleOption:{
                bodyCellClass: ({ row, column, rowIndex }) => {
                    // isAuto 0不是自动填充格1是自动填充
                    // sign 0从属单元格 1主导单元格 2单独测点 3时间不变 4文本
                    const data = this.tableRealData[rowIndex][column.field]
                    if(data){
                        if(data.sign == 3 && data.isAuto == 1){
                            // 时间不变
                            return "table-body-cell3 table-body-cell1-bg";
                        }
                        
                        if(data.sign == 3 && data.isAuto == 0){
                            return "table-body-cell3"
                        }

                        if(data.sign == 2 && data.isAuto == 1){
                            // 单独测点
                            return "table-body-cell2 table-body-cell1-bg";
                        }
                        
                        if(data.sign == 2 && data.isAuto == 0){
                            return "table-body-cell2"
                        }

                        if(data.sign == 1 && data.isAuto == 1){
                            // 主导格
                            return "table-body-cell1 table-body-cell1-bg";
                        }
                        
                        if(data.sign == 1 && data.isAuto == 0){
                            return "table-body-cell1";
                        }

                        if(data.isAuto == 1){
                            return "table-body-cell1-bg";
                        }
                    }

                },
            },
            eventCustomOption:{
                bodyCellEvents:({row,column,rowIndex})=>{
                    return {
                        mouseover: (event) => {
                            const data = this.tableRealData[rowIndex][column.field]
                            if(data && data.tips && data.tips.length > 0){
                            clearTimeout(this.tipsTimer)
                            this.tipsTimer = setTimeout(() => {
                                this.tipsPosition = {
                                left: (event.clientX - 640) + 'px',
                                top: (event.clientY - 220) + 'px'
                                }
                                this.tableTips = data.tips
                                this.showTips = true
                            }, 50)
                            }
                        },
                        mouseleave:(event)=>{
                            clearTimeout(this.tipsTimer)
                            this.showTips = false
                            this.tableTips = []
                        }
                    }
                },
            },
            tableRealData:[],
            tableNumberDialog:false,
            letters:['A','B','C','D','E','F','G','H','I','J','K','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','AA','AB','AC','AD','AE','AF','AG','AH','AI','AJ','AK','AM','AN','AO','AP','AQ','AR','AS','AT','AU','AV','AW','AX','AY','AZ','BA','BB','BC','BD','BE','BF','BG','BH','BI','BJ','BK','BM','BN','BO','BP','BQ','BR','BS','BT','BU','BV','BW','BX','BY','BZ','CA','CB','CC','CD','CE','CF','CG','CH','CI','CJ','CK','CM','CN','CO','CP','CQ','CR','CS','CT','CU','CV','CW','CX','CY','CZ','DA','DB','DC','DD','DE','DF','DG','DH','DI','DJ','DK','DM','DN','DO','DP','DQ','DR','DS','DT','DU','DV','DW','DX','DY','DZ',],
            RowCol:0,
            autoRow:'',
            autoForm:{},
            autoDataRowDialog:false,
            timeTableCellDialog:false,
            timeTableCellForm:{},
            showTips: false,
            tipsPosition: {
                left: '0px',
                top: '0px'
            },
            tipsTimer: null
        }
    },
    mounted(){
        this.initBasin()
    },
    activated(){
        this.initBasin()
        const newStationId = sessionStorage.getItem("stationId");
        if (this.stationId != newStationId) {
           this.stationId = newStationId;
        }
    },
    deactivated(){
        bus.$off('station-changed', this.handleStationChanged);
    },
    beforeDestroy(){
        bus.$off('station-changed', this.handleStationChanged);
    },
    methods:{
        initBasin() {
            bus.$emit('showBasin', true);
            bus.$off('station-changed', this.handleStationChanged);
            bus.$on('station-changed', this.handleStationChanged);
        },
        handleStationChanged(newStationId, targetRoute) {
            if (!targetRoute || targetRoute === this.$route.name) {
                this.stationId = newStationId;
            }
        },
        handleSetTableMode(){
            setTableMode({
                mode:this.rowState,
                tableID:this.tableID
            }).then(res=>{
                if(res.isSuccess){
                    this.$message.success('设置成功！')
                    this.getTableList(this.treeID)
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        bodyCellSpan({ row, column, rowIndex }) {
            if(this.mergeData.length > 0){
                for(let i=0; i<this.mergeData.length; i++){
                if(this.mergeData[i].rowIndex == rowIndex){
                    if(column.field == this.mergeData[i].field){
                    return {
                        rowspan:this.mergeData[i].rowspan,
                        colspan:this.mergeData[i].colspan
                    }
                    }
                }
                }
            }
            if(this.merged.length > 0){
                for(let i=0; i<this.merged.length; i++){
                if(this.merged[i].rowIndex == rowIndex){
                    if(column.field == this.merged[i].field){
                    return {
                        rowspan:0,
                        colspan:0
                    }
                    }
                }
                }
            }
        },
        getTableList(treeId){
            if(treeId && treeId == 0){
                this.tableData = []
                this.columns = []
                return
            }
            this.treeID = treeId
            this.tableLoading = true
            getTableByTreeID({
                TableTreeID:treeId,
                StationID:this.stationId,
                tp:0
            }).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.selectedLetters = []
                    const _data = res.data[0]
                    this.rowState = _data.mode
                    this.tableID = _data.id || 0
                    if(_data.colums && _data.colums.length > 0){
                        this.onPushSelectedLetters(_data.colums)
                        const _d = [..._data.colums]
                        _d.unshift({
                            field: "",
                            key: "rowKey",
                            title: "",
                            width:40,
                            fixed: "left",
                            operationColumn: true,
                            renderBodyCell: ({ row, column, rowIndex }, h) => {
                                return rowIndex + 1;
                            },
                        })
                        this.columns = [..._d]
                        if(_data.tableData == null || _data.tableData.length == 0){
                            this.tableData = [] 
                            this.tableData.push({
                                rowKey:1,
                                text:''
                            })
                        }else{
                            const _list = []
                            _data.tableData.forEach((item,index)=>{
                                const data = {}
                                for(let key in item){
                                    data.rowKey = index + 1
                                    data[key] = item[key].text
                                }
                                _list.push(data)
                            })
                            this.tableData = _list
                            this.tableRealData = _data.tableData
                    }
                    this.mergeData = _data.mergeData || []
                    this.merged = _data.merged || []
                    this.tableLoading = false
                }else{
                    this.columns = []
                    this.tableData = []
                    this.tableLoading = false
                }
                }else{
                    this.tableID = 0
                    this.columns = []
                    this.tableData = []
                    this.tableLoading = false
                }
            })
        },
        onPushSelectedLetters(list){
            list.forEach(item=>{
                this.selectedLetters.push(item.field)
                if(item.children && item.children.length > 0){
                    this.onPushSelectedLetters(item.children)
                }
            })
        },
        hanldeAfterMenuClick(type, selectionRangeKeys, selectionRangeIndexes){
            const rowIndex = selectionRangeIndexes.startRowIndex
            const field = selectionRangeKeys.startColKey
            const cellData = this.tableRealData[rowIndex][field]
            this.cellData = cellData
            // 单元格操作
            if(type == 'selectPoint'){
                this.showInfoAndValue = 1
                this.onPointDialogInfoSet(selectionRangeIndexes,selectionRangeKeys)
            } 
            if(type == 'pointInfo'){
                this.showInfoAndValue = 2
                if(cellData.CODE_ID == 0){
                    this.onPointDialogInfoSet(selectionRangeIndexes,selectionRangeKeys)
                }else{
                    this.onPointDialogInfoSet(selectionRangeIndexes,selectionRangeKeys)
                }
            }
            if(type == 'pointValue'){
                this.showInfoAndValue = 3
                if(cellData.CODE_ID == 0){
                    this.onPointDialogInfoSet(selectionRangeIndexes,selectionRangeKeys)
                }else{
                    this.onPointDialogInfoSet(selectionRangeIndexes,selectionRangeKeys)
                }
            }
            
            if(type == 'alonePoint'){
                getTableCellSign({
                    ID:cellData.ID,
                    Sign:2
                }).then(res=>{
                    if(res.isSuccess){
                       this.$message.success('设置成功！')
                        this.getTableCellData(cellData.ID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }

            if(type == 'pointMain'){
                setMainCell({
                    TableCellID:cellData.ID
                }).then(res=>{
                if(res.isSuccess){
                    this.$message.success('设置成功！')
                    this.getTableCellData(cellData.ID)
                }else{
                    this.$message.error(res.errorMessage)
                }
                })
            }

            if(type == 'ordinary'){
                getTableCellSign({
                    ID:cellData.ID,
                    Sign:0
                }).then(res=>{
                    if(res.isSuccess){
                       this.$message.success('设置成功！')
                        this.getTableCellData(cellData.ID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }

            // 行操作
            if(type == 'mergeRow'){
                if(
                    selectionRangeIndexes.startColIndex == selectionRangeIndexes.endColIndex &&
                    selectionRangeIndexes.startRowIndex < selectionRangeIndexes.endRowIndex && 
                    selectionRangeKeys.startColKey == selectionRangeKeys.endColKey && 
                    selectionRangeKeys.startRowKey != selectionRangeKeys.endRowKey
                ){
                    const startrowIndex = selectionRangeIndexes.startRowIndex
                    const startfield = selectionRangeKeys.startColKey
                    const _startData = this.tableRealData[startrowIndex][startfield]

                    const endrowIndex = selectionRangeIndexes.endRowIndex
                    const endfield = selectionRangeKeys.endColKey
                    const _endData = this.tableRealData[endrowIndex][endfield]
                    const ca = _endData.row + _endData.rowSpan - _startData.row
    
                    const _data = {..._startData}
                    _data.rowSpan = ca
                    mergeCell(_data).then(res=>{
                        if(res.isSuccess){
                            this.getTableList(this.treeID)
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }else{
                    this.$message.error('选择的单元格不符合规范！')
                }
            }

            if(type == 'splitRow'){
                splitCell(cellData).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }

            if(type == 'REMOVE_ROW'){
                if(this.tableData.length == 1){
                    this.$message.error('至少保留一行')
                    return false
                }else{
                    DelRow(cellData).then(res=>{
                        if(res.isSuccess){
                            this.getTableList(this.treeID)
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }
            }

            if(type == 'INSERT_ROW_ABOVE'){
                this.columns.splice(0,1)
                AddRow({
                    columns:this.columns,
                    tableID:this.tableID,
                    row:selectionRangeIndexes.startRowIndex,
                    accNum:0
                }).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                    }
                }) 
            }

            if(type == 'INSERT_ROW_BELOW'){
                this.columns.splice(0,1)
                AddRow({
                    columns:this.columns,
                    tableID:this.tableID,
                    row:selectionRangeIndexes.startRowIndex,
                    accNum:1
                }).then(res=>{
                    if(res.isSuccess){
                       this.getTableList(this.treeID)
                    }
                })
            }

            if(type == 'addRowPrevCopy'){
                this.columns.splice(0,1)
                CopyRowToAddRow({
                    columns:this.columns,
                    tableID:this.tableID,
                    row:selectionRangeIndexes.startRowIndex,
                    accNum:0
                }).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }

            if(type == 'addRowNextCopy'){
                this.columns.splice(0,1)
                CopyRowToAddRow({
                    columns:this.columns,
                    tableID:this.tableID,
                    row:selectionRangeIndexes.startRowIndex,
                    accNum:1
                }).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }

            if(type == 'autoRow' || type == 'autoRowYear'){
                this.RowCol = cellData.row
                this.autoRow = type == 'autoRowYear' ? 'year' : ''
                getTableAutoRow({
                    TableID:this.tableID
                }).then(res=>{
                    if(res.isSuccess){
                        if(res.data.length == 0){
                            this.autoForm = {
                                dateMode:1,
                                list:[{
                                    isAppointM:1,
                                    valueM:'',
                                    isAppointD:1,
                                    valueD:'',
                                    startM:'',
                                    startD:'',
                                    endM:'',
                                    endD:'',
                                    isAppointH:1,
                                    valueH:'',
                                    ID:0
                                }]
                            }
                        }else{
                            const _d = [...res.data]
                            const list = []
                            _d.forEach(item=>{
                                const _l = {
                                    isAppointD:item.isAppointD,
                                    isAppointH:item.isAppointH,
                                    isAppointM:item.isAppointM,
                                    valueD:item.valueD,
                                    valueH:item.valueH,
                                    valueM:item.valueM,
                                    ID:item.ID
                                }
                                const start = item.B_Day.split('-')
                                _l.startM = Number(start[0])
                                _l.startD = Number(start[1])
                                const end = item.E_Day.split('-')
                                _l.endM = Number(end[0])
                                _l.endD = Number(end[1])
                                list.push(_l)
                            })

                            const _data = {
                                MODE:_d[0].MODE,
                                RowCol:_d[0].RowCol,
                                tableID:_d[0].tableID,
                                dateMode:_d[0].dateMode,
                                list:list
                            }
                            this.autoForm = {..._data}
                        }
                        this.autoDataRowDialog = true
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            
            }

            if(type == 'delAutoRow'){
                this.$confirm(`确认取消当前自动填充行设置？`,'提示',{
                    type:'warning'
                }).then(() => {
                delTableAutoRow({
                    TableID:this.tableID
                }).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                        this.$message.success('删除成功！')
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
                }).catch(() => {}); 
            }

            if(type == 'timeInvariantRow'){
                this.timeTableCellForm = {
                    ...cellData,
                    tp:1,
                    num:cellData.row,
                    dtModeID:cellData.DT1 && cellData.DT2 ? 3 : 4
                }
                this.timeTableCellDialog = true
            }

            // 列操作

            if(type == 'mergeCol'){
                if(
                    selectionRangeIndexes.startColIndex < selectionRangeIndexes.endColIndex &&
                    selectionRangeIndexes.startRowIndex == selectionRangeIndexes.endRowIndex && 
                    selectionRangeKeys.startColKey != selectionRangeKeys.endColKey && 
                    selectionRangeKeys.startRowKey == selectionRangeKeys.endRowKey
                ){
                // 列合并

                const startrowIndex = selectionRangeIndexes.startRowIndex
                const startfield = selectionRangeKeys.startColKey
                const _startdata = this.tableRealData[startrowIndex][startfield]

                const endrowIndex = selectionRangeIndexes.endRowIndex
                const endfield = selectionRangeKeys.endColKey
                const _endData = this.tableRealData[endrowIndex][endfield]
                const ca = _endData.col + _endData.colSpan - _startdata.col

                const _data = {..._startdata}
                _data.colSpan = ca

                mergeCell(_data).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else 
                this.$message.error('选择的单元格不符合规范！')
            }

            if(type == 'splitCol'){
                splitCell(cellData).then(res=>{
                    if(res.isSuccess){
                        this.getTableList(this.treeID)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }

            if(type == 'delCol'){
                if(this.columns.length == 2){
                    this.$message.error('无法删除！至少要保留一列！')
                    return false
                }else{
                    DelCol(cellData).then(res=>{
                        if(res.isSuccess){
                            this.getTableList(this.treeID)
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }
            }

            if(type == 'insertBeforeCol' || type == 'insertAfterCol'){
                const findIndex = this.columns.findIndex(item => item.field == field)
                const len = this.selectedLetters.length
                const name = this.findSameLetter(len)
                if(name){
                    this.columns.splice(findIndex,0, {
                        field:name,
                        key: name,
                        title: name,
                        edit: true,
                    })
                    if(type == 'insertBeforeCol'){
                        this.handleAddColData(name,cellData,0)
                    }else if(type == 'insertAfterCol'){
                        this.handleAddColData(name,cellData,1)
                    }
                    
                }
            }


            if(type == 'addColLeftCopy' || type == 'addColRightCopy'){
                if(selectionRangeKeys.startColKey == selectionRangeKeys.endColKey){
                const rowIndex = selectionRangeIndexes.startRowIndex
                const field = selectionRangeKeys.startColKey
                const _data = this.tableRealData[rowIndex][field]

                const findIndex = this.columns.findIndex(item => item.field == field)
                const len = this.selectedLetters.length
                const name = this.findSameLetter(len)
                let dir = type == 'addColLeftCopy' ? 0 : 1
                if(name){
                    this.columns.splice(findIndex,0, {
                        field:name,
                        key: name,
                        title: name,
                        edit: true,
                    })
                    this.columns.splice(0,1)
                    CopyColAddCol({
                        colums:this.columns,
                        tableID:this.tableID,
                        field:name,
                        col:_data.col,
                        rowCount:this.tableData.length,
                        direction:dir,
                        cellID:_data.ID
                    }).then(res=>{
                        if(res.isSuccess){
                           this.getTableList(this.treeID)
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }    
                }else{
                    this.$message.error('只能复制一列')
                }
            }

            if(type == 'timeInvariantCol'){
                console.log(cellData)
                this.timeTableCellForm = {
                    ...cellData,
                    tp:2,
                    num:cellData.col,
                    dtModeID:cellData.DT1 && cellData.DT2 ? 3 : 4
                }
                this.timeTableCellDialog = true
            }

        },
        handleAddColData(field,data,direction){
            this.columns.splice(0,1)
            AddCol({
                colums:this.columns,
                tableID:this.tableID,
                field:field,
                col:data.col,
                rowCount:this.tableData.length,
                direction:direction,
                cellID:data.ID
            }).then(res=>{
                if(res.isSuccess){
                    this.getTableList(this.treeID)
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        findSameLetter(index){
            const name = this.letters[index]
            const a = this.selectedLetters.some(item=> item == name)
            if(a){
                index++
                return this.findSameLetter(index)
            }else{
                return name
            }
        },

        onPointDialogInfoSet(selectionRangeIndexes,selectionRangeKeys){
            const rowIndex = selectionRangeIndexes.startRowIndex
            const field = selectionRangeKeys.startColKey
            const _d = this.tableRealData[rowIndex][field]

            if(field != '' && _d){  
                this.cellData = {..._d}
                this.cellData.dataTp = 1
                this.cellData.field = field
                if(this.showInfoAndValue == 1){
                    this.cellData.TP = _d.TP < 3 ? _d.TP : 1
                }else if(this.showInfoAndValue == 2){
                    this.cellData.TP = 1
                }else if(this.showInfoAndValue == 3){
                    this.cellData.TP = 2
                }
                if(_d.ID){
                    this.handleGetCellTable(_d.ID,this.cellData.TP)
                }else{
                    this.cellSettingVisible = true
                }
            }else{
                this.cellData = {
                    id:0,
                    field:field || '',
                    row: 0,
                    col:0,
                    colSpan:1,
                    rowSpan:1,
                    TP:1,
                    dataTp:1  //1数据2表尾
                }
                this.cellSettingVisible = true
            }
        },

        handleGetCellTable(id,seTP){
            getTableCell({
                TableCellID:id
            }).then(res=>{
                if(res.isSuccess && res.data){
                const {CODE_ID,col,comp,DT1,DT2,dataTp,dtModeID,field,row,TableField,text,TP,ValueTypeEXP,valueTypeID,ID,pointName,l_TP,sign,timeLen,timeTip} = res.data

                const _data = {
                    ...res.data,
                    field:field,
                    pointName:pointName ? pointName.split(',') : [],
                    CODE_ID:CODE_ID ? CODE_ID.split(',') : [],
                    L_TP:l_TP == 0 || l_TP == 1 || l_TP == null ? 2 : l_TP,
                    TP:seTP? seTP : TP || 1
                }
                this.cellData = {..._data}
                this.cellSettingVisible = true
                }
            })
        },
        getTableCellData(id){
             getTableCell({
                TableCellID:id
            }).then(res=>{
                if(res.isSuccess && res.data){
                    this.refreshTableCell(res.data)
                }
            })
        },
        handleSaveColAndRow(row,col){
            this.columns = []
            this.tableData = []
            if(this.treeID != ''){
                this.moduleTableVisible = false
                // 成生表头字段字母
                let titleList = []
                for(var i=0;i< row;i++){
                    titleList.push(this.letters[i]);
                }
                // 表头展示部分
                let columns = [
                {
                    field: "",
                    key: "rowKey",
                    title: "",
                    width:40,
                    fixed: "left",
                    operationColumn: true,
                    renderBodyCell: ({ row, column, rowIndex }, h) => {
                        return rowIndex + 1;
                    },
                },
                ];
                const a = titleList.map((keyValue) => {
                    return {
                    title: keyValue,
                    field: keyValue,
                    key: keyValue,
                    edit: true,
                    };
                })
                this.columns = columns.concat(a)

                // 表体展示部分
                let tablelist = []
                for(let i=0; i<col; i++){
                let dataItem = {
                        rowKey:i + 1,
                        text:''
                    }
                    tablelist.push(dataItem)
                }
                this.tableData = tablelist

                // 真实表体内容部分
                const _realList = []
                tablelist.forEach((item,index)=>{
                // 行
                const rowData = {}
                titleList.forEach((sub,sIndex) => {
                    const colData = {
                    TableField:sub,
                    row:index,
                    col:sIndex
                    }
                    rowData[sub] = colData
                })
                _realList.push(rowData)
                })
                this.tableRealData = _realList

                this.handleSaveTable()
                this.tableNumberDialog = false
            }else{
                this.$message.error('请选择目录')
            }
        },
        handleSaveTable(){
            this.columns.splice(0,1)
            SaveTable({
                ID:this.tableID || 0,
                Name:'',
                TableTreeID:this.treeID,
                colums:this.columns,
                mergeData:[],
                merged:[],
                tableData:this.tableRealData,
                stationID:this.stationId,
                mode:this.rowState,
            }).then(res=>{
                if(res.isSuccess){
                    this.getTableList(this.treeID)
                }
            })
        },
        handleDelTable(){
            this.$confirm(`确认删除该表格？`,'提示',{
                type:'warning'
            }).then(() => {
                TableDel({
                    ID:this.tableID
                }).then(res=>{
                    if(res.isSuccess){
                        this.columns = []
                        this.tableData = []
                    }
                })
            }).catch(() => {});         
        },
        handleCancelCellSetDialog(){
            this.cellSettingVisible = false
            this.cellData = {}
        },
        handleSaveCellSetDialog(data,seletedSign){
            const _d = {...data}

            if(data.sign == 4){
                _d.sign = 0
            }
            if(data.TP == 2){
                if(data.sign == 3){
                if(seletedSign){
                    _d.sign = 3
                }else{
                    _d.sign = 0
                }
                }else{ 
                    if(seletedSign){
                        _d.sign = 3
                    }
                }
            }

            setTableCell(_d).then(res=>{
                if(res.isSuccess){
                    this.handleCancelCellSetDialog()
                    this.refreshTableCell(res.data)
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleSetCellTableInput(){
            // 手动输入时的保存
            const _data = {
                ID:this.cellData.ID || 0,
                TableID:this.tableID || 0,
                TableField:this.cellData.TableField || '',
                CODE_ID:this.cellData.CODE_ID || [],
                TP:this.cellData.TP || 1,
                field:this.cellData.field || '',
                comp:this.cellData.comp || null,
                valueTypeID:this.cellData.valueTypeID || 0,
                ValueTypeEXP:this.cellData.ValueTypeEXP || null,
                dtModeID:this.cellData.dtModeID || 0,
                DT1:'',
                DT2:'',
                col:this.cellData.col || 0,
                row:this.cellData.row || 0,
                rowSpan:this.cellData.rowSpan || 1,
                colSpan:this.cellData.colSpan || 1,
                width:'',
                dataTp:this.cellData.dataTp,
                text:this.cellData.text || '',
                sign:this.cellData.sign,
                isHead:this.cellData.isHead || 0,
                l_TP:this.cellData.L_TP,
                timeLen:Number(this.cellData.timeLen) || null,
                timeTip:this.cellData.timeTip || null
            }

            setTableCell(_data).then(res=>{
                if(res.isSuccess){
                    this.refreshTableCell(res.data)
                }else{
                    const _list = [...this.tableData]
                    const obj1 = _list[_data.row]
                    obj1[_data.TableField] =  this.cellData.text
                    _list[data.row] = {...obj1} 
                    this.tableData = [..._list]
                    this.$message.error(res.errorMessage)
                }
            })
        },
        refreshTableCell(data){
            // 回填单元格
            const _list = [...this.tableData]
            const obj1 = _list[data.row]
            const copy =Object.assign({},obj1)
            copy[data.TableField] = data.text
            _list[data.row] = copy 
            this.tableData = [..._list]
            // 回填真实表格
            const _listReal = [...this.tableRealData]
            const rowData = _listReal[data.row]
            rowData[data.TableField] = {...data}
            _listReal[data.row] =  {...rowData}
            this.tableRealData = [..._listReal]
        },
        handleCancelAutoRowClick(){
            this.autoDataRowDialog = false
            this.autoForm = {}
        },
        handleConfirmAutoRow(data){
            const list = []
            data.list.forEach(item=>{
                const _d = {
                    ID:item.ID || 0,
                    tableID:this.tableID,
                    dateMode:this.autoForm.dateMode,
                    isAppointM:item.isAppointM,
                    valueM:item.valueM,
                    isAppointD:item.isAppointD,
                    valueD:item.valueD,
                    B_Day:`${item.startM || ''}-${item.startD || ''}`,
                    E_Day:`${item.endM || ''}-${item.endD || ''}`,
                    isAppointH:item.isAppointH,
                    valueH:item.valueH,
                    RowCol:this.RowCol,
                    MODE:this.autoRow == 'year' ? 3 : 1
                }
                list.push(_d)
            })
            AddTableAutoRow(list).then(res=>{
                if(res.isSuccess){
                    this.getTableList(this.treeID)
                    this.handleCancelAutoRowClick()
                }else{
                this.$message.error(res.errorMessage)
                }
            })
        },
        handleCancelTimelick(){
            this.timeTableCellDialog = false
            this.timeTableCellForm = {}
        },
        handlConfrimTimelick(data){
            const _data = {
                tableID:data.TableID,
                sign:data.sign,
                tp:data.tp,
                num:data.num,
                bTime:data.DT1,
                eTime:data.DT2,
            }
    
            setColOrRowCellsTime(_data).then(res=>{
                if(res.isSuccess){
                    this.getTableList(this.treeID)
                    this.handleCancelTimelick()
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
    }

})
</script>
<style lang="scss" scoped>
.content{
   display: grid;
   grid-template-columns: 350px 1fr;
   height: calc(100vh - 120px);
   overflow: auto;
    .left-wrapper{
       width: 350px;
        height: calc(100vh - 120px);
        flex-shrink: 0;
    }
    .right-wrapper{
        height: calc(100vh - 120px);
        overflow: auto;
        margin-left:10px;
        padding:0px 20px;
        box-sizing: border-box;
    }
}
.collapseTitle-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.table-wrapper{
    position: relative;
    .tips-card{
        height: auto;
        position: absolute;
        z-index: 9999;
        padding:0;
        margin:0;
    }
}
::v-deep .el-collapse-item__content{
    padding-bottom: 0px !important;
}

.draw-type-content {
    .custom-radio-group {
      display: flex;
      flex-direction: row;
      gap: 12px;
      width: 100%;
      padding:20px 0;
      .custom-radio {
        margin: 0;
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid #e4e9f2;
        transition: all 0.3s ease;
        background: white;
        
        &:hover {
          border-color: #5c8ced;
          box-shadow: 0 2px 8px rgba(92, 140, 237, 0.1);
        }
        
        ::v-deep .el-radio__input {
          display: none;
        }
        
        ::v-deep .el-radio__label {
          padding: 0;
          width: 100%;
        }
        
        .radio-content {
          display: flex;
          align-items: center;
          width: 100%;
          
          i {
            font-size: 20px;
            margin-right: 12px;
            color: #5c8ced;
          }
          
          span {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
          }
        }
      }
      
      ::v-deep .el-radio.is-checked {
        border-color: #5c8ced;
        background: linear-gradient(135deg, #ecf2ff 0%, #e0e9ff 100%);
        
        .radio-content {
          i, span {
            color: #5c8ced;
          }
        }
      }
    }
    
  }
 .addTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:60%;
    margin:100px auto;
    height: 30vh;
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: #f8fafc;
    cursor: pointer;
    i{
        font-size: 40px;
        color: #4776E6;
    }
    p{
        color: #4a5568;
        font-weight: 500; 
    }
    &:hover{
        border-color: #4776E6;
        background: #f0f5ff;
    }
}
</style>